<template>
  <div class="add">
    <MyHeader />
    <Form>
      <Modal v-model="model" width="360">
        <p slot="header" style="color: #2b85e4;text-align:center">
          <Icon type="ios-information-circle"></Icon>
          <span>录入法定代表人手机号码</span>
        </p>
        <div style="text-align:center">
          <Form  label-position="left"  ref="lerepForm" :model="lerepForm">
            <FormItem label="" :label-width="0" prop='lerepMobTel' :rules="[validator.telphone, validator.must]">
              <Input v-model="lerepForm.lerepMobTel" type="text" placeholder="法定代表人手机号码"></Input>
            </FormItem>
          </Form>
        </div>
        <div slot="footer">
          <Button type="primary" size="large" long  @click="saveInfo">确定</Button>
        </div>
      </Modal>
      <Row>董事</Row>
      <div class="add_items clearfix">
        <div v-for="(item,index) in dsList" @click="edit(item.personid,1)" :key="index" class="add_items-person">
          <p>{{item.name}}</p>
          <p>{{item.position | dict('CB18')}}</p>
          <i class="ivu-icon" @click.stop="delet(item,index,dsList )"></i>
        </div>
        <div @click="addMem(1)">
          <img src="../../../assets/img/ico-add.png" alt="">
        </div>
      </div>
      <Row>
        经理<span>(仅为一人，可由董事长，执行董事，董事兼任)</span>
      </Row>
      <div class="add_items clearfix">
        <div v-for="(item,index) in jlList" :key="index" @click="edit(item.personid,2)"  class="add_items-person">
          <p>{{item.name}}</p>
          <p>{{item.position | dict('CB18')}}</p>
          <i class="ivu-icon" @click.stop="delet(item,index,jlList)"></i>
        </div>
        <div @click="addMem(2)" v-if="jlList.length === 0">
          <img src="../../../assets/img/ico-add.png" alt="">
        </div>
      </div>
      <Row>监事</Row>
      <div class="add_items clearfix">
        <div v-for="(item,index) in jsList" @click="edit(item.personid,3)" :key="index" class="add_items-person">
          <p>{{item.name}}</p>
          <p>{{item.position | dict('CB18')}}</p>
          <i class="ivu-icon" @click.stop="delet(item,index,jsList)"></i>
        </div>
        <div @click="addMem(3)">
          <img src="../../../assets/img/ico-add.png" alt="">
        </div>
      </div>
      <Row>
        法定代表人<span>(只能由担任执行董事，经理的人担任)</span>
      </Row>
      <FormItem class="add_box">
        <Select placeholder="请选择法定代表人" v-model="lerep" >
          <Option v-for="(item,index) in lerepList" :key="index" :value="item.personid" @click="lerepForm.lerepMobTel = item.mobtel">{{item.name}}({{item.position | dict('CB18')}})</Option>
        </Select>
      </FormItem>
      <div class="add_bottom">
         <div class="bottom">
          <Button type="warning" @click="saveInfo">保存</Button>
          <Button type="primary" @click="gotoNext">下一步</Button>
        </div>
        <MyFooter />
      </div>
    </Form>
  </div>
</template>

<script>
  import MyHeader from '../../../components/MyHeader.vue'
  import MyFooter from '../../../components/MyFooter.vue'
  import request from '../../../utils/request'
  import validator from '../../../utils/validatorUtil.js'
  export default {
    data() {
      return {
        validator,
        model: false,
        dsList: [],
        jlList: [],
        jsList: [],
        lerepList: [],
        lerep: '',
        lerepForm: {
          lerepMobTel: ''
        },
        isjl: '',
        keepOperType: false
      }
    },
    methods: {
      addMem(key) {
        let formItem = JSON.parse(sessionStorage.getItem('formItem'))
        this.isjl = this.jlList.length === 0 ? 'true' : 'false'
        console.log(this.isjl)
        if (key === 1 && formItem.isboard === '0' && this.dsList.length >= 1) {
         this.$Modal.confirm({
              title: '新增董事确认',
              content: '<p>您已选择不设立董事会，董事人数只能是1个且为执行董事，是否确定继续添加操作</p>',
              onOk: () => {
                  this.$router.push({name: 'MemberAdd', query: {'key': key, formItem: formItem, isjl: this.isjl}})
              }
          })
        } else if (key === 2 && this.jlList.length >= 1) {
         this.$Modal.confirm({
              title: '新增经理确认',
              content: '<p>经理人数最多为1人，是否确定继续添加操作</p>',
              onOk: () => {
                  this.$router.push({name: 'MemberAdd', query: {'key': key, formItem: formItem, isjl: this.isjl}})
              }
          })
        } else if (key === 3 && formItem.issuped === '0' && this.jsList.length >= 2) {
         this.$Modal.confirm({
              title: '新增监事确认',
              content: '<p>您已选择不设立监事会，监事人数最多为2人，是否确定继续添加操作</p>',
              onOk: () => {
                  this.$router.push({name: 'MemberAdd', query: {'key': key, formItem: formItem, isjl: this.isjl}})
              }
          })
        } else {
          this.$router.push({name: 'MemberAdd', query: {'key': key, formItem: formItem, isjl: this.isjl}})
        }
      },
      edit(val, key) {
        let formItem = this.$route.query.formItem
        this.isjl = this.jlList.length === 0 ? 'true' : 'false'
        this.$router.push({name: 'MemberEdit', query: {'key': key, formItem: formItem, isjl: this.isjl, personid: val}})
      },
      queryMemList() {
        this.jlList = []
        this.dsList = []
        this.jsList = []
        this.lerepList = []
        request.get('/interface/apply/cp/setup/queryMemList.do', {gid: sessionStorage.getItem('gid')}
        ).then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
          } else if (response.data.result === 'success') {
            let list = response.data.data
            for (let i = 0; i < list.length; i++) {
              let person = list[i]
              if (person.lerepsign === '1') {
                this.lerep = person.personid
                this.lerepForm.lerepMobTel = person.mobtel
              }
             if (person.position === '436A') {
               this.jlList.push(person)
               this.lerepList.push(person)
             } else if (person.position === '408A' || person.position === '408B') {
               this.jsList.push(person)
             } else {
               this.dsList.push(person)
               if (person.position === '432K') {
                 this.lerepList.push(person)
               }
             }
            }
          }
        })
      },
      delet(item, index, list) {
        this.$Modal.confirm({
              title: '删除主要人员确认',
              content: '<p>删除之后，无法恢复数据，请确认是否继续操作</p>',
              onOk: () => {
                  request.get('/interface/apply/cp/setup/deleteMem.do', {personid: item.personid}
                    ).then(response => {
                      if (response.data.result === 'error') {
                        this.$ErrorAlert(response.data.message)
                      } else if (response.data.result === 'success') {
                        list.splice(index, 1)
                        this.$SuccessAlert('删除成功')
                      }
                    })
              }
        })
      },
      save(isNext) {
        this.model = false
        if (!this.lerep) {
          this.$ErrorAlert('请选择法定代表人')
          return
        }
        if (!this.lerepForm.lerepMobTel) {
          this.model = true
          this.keepOperType = isNext
          return false
        }
        request.get('/interface/apply/cp/setup/updateLerep.do', {personid: this.lerep, gid: sessionStorage.getItem('gid'), mobtel: this.lerepForm.lerepMobTel}
        ).then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
          } else if (response.data.result === 'success') {
            if (this.keepOperType || isNext) {
              this.$router.push({name: 'contact'})
            } else {
              this.$SuccessAlert('保存成功')
            }
          }
        })
      },
      saveInfo() {
        this.save(false)
      },
      gotoNext() {
        this.save(true)
      }
    },
    components: {
      MyHeader,
      MyFooter
    },
    mounted() {
      this.queryMemList()
    }
  }

</script>

<style lang="scss">
  .add {
    position: relative;
    min-height: 100%;
    padding-bottom: 4rem;
    form {
      .ivu-row {
        padding: 0 0.54rem;
        height: 1.75rem;
        line-height: 1.75rem;
        background: #f3f3f3;
        overflow: hidden;
        span {
          font-size: 0.43rem;
          color: #aaa;
        }
      }
    }
    &_items {
      padding: 0.54rem 0.54rem 0;
      &-person {
        padding: 0.36rem;
        border: 1px solid #569c17;
        background: #f7fdf0;
        p {
          &:first-child {
            font-weight: 700;
          }
          &:nth-child(2) {
            font-size: 0.43rem;
          }
        }
        i {
          position: absolute;
          right: -0.2rem;
          top: -0.2rem;
          &::before {
            font-size: 1rem;
            color: #569c17;
            content: "\F128";
          }
        }
      }
      >div {
        position: relative;
        width: 29%;
        height: 2.3rem;
        float: left;
        margin: 0 2.1% 0.54rem;
        border-radius: 5px;
        &:last-child {
          border: 1px solid #dddee1;
          img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            width: 1rem;
          }
        }
      }
    }
    &_box {
      padding: 0.54rem;
      margin-bottom: 0;
      .ivu-select-selection {
        height: 1.75rem;
        line-height: 1.75rem;
        .ivu-select-placeholder {
          height: 1.75rem;
          line-height: 1.75rem;
          font-size: 0.5rem;
        }
        .ivu-select-selected-value {
          height: 1.75rem;
          line-height: 1.75rem;
          font-size: 0.5rem;
        }
      }
    }
    &_bottom {
      position: absolute;
      width: 100%;
      height: 3.5rem;
      bottom: 0;
    }
  }
.bottom {
    display: flex;
    justify-content: space-around;
    // padding: 0.54rem;
    button {
      width: 45%;
      padding-top: 0.36rem;
      padding-bottom: 0.36rem;
      font-size: 0.57rem;
    }
  }
</style>
